@charset "utf-8";

@media screen and (max-width: 1440px) {
  :root {
    --font-size-nav: 18px;
    --font-size-title: 30px;
    --font-size-enTitle: 22px;
  }

  .menu-btn {
    width: 24px;
  }

  .nav-list {
    width: 50%;
  }

  .title {
    width: 134px;
    height: 170px;
  }

  .box {
    padding: 90px;
  }

  .about-us-title {
    right: 4vw;
  }

  .about-us-text p {
    width: 30vw;
  }

  .c-and-j-bg {
    height: 280px;
    padding-top: 150px;
  }

  .car-model-text>div {
    margin-top: 0.6vw;
  }

  .parameter {
    padding: 100px 200px;
  }

  .job {
    padding: 0 10vw;
  }

  .company {
    padding: 60px 80px;
  }

  .company-text {
    right: 80px;
    width: 48vw;
  }

  .company-text p {
    line-height: 1.5;
  }
}

@media screen and (max-width: 1366px) {
  .contact-title>img {
    margin-left: 16px;
  }

  .copyright {
    font-size: 14px;
  }

  .box {
    padding: 60px;
  }

  .buy-car {
    padding-top: 100px;
  }

  .buy-car .title-wide {
    width: 30vw;
    height: 148px;
  }

  .buy-car {
    margin-bottom: 60px;
  }

  .contact-main {
    padding: 50px 60px 20px;
  }

  .form-row.row-50 {
    width: 100%;
  }
}

@media screen and (max-width: 1280px) {
  .box {
    padding: 40px;
  }

  .buy-car {
    margin-bottom: 40px;
  }

  #videoBox,
  #recentNews {
    margin-top: 34px;
  }

  .about-us {
    height: auto
  }

  .about-us>img {
    position: relative;
    width: 100%;
    height: auto;
  }

  .about-us-text p {
    width: 100%;
  }

  .title-wide {
    width: 384px;
  }

  .c-and-j-bg {
    height: 240px;
    padding-top: 120px;
    padding-left: 60px;
  }

  .exterior #swiper1 {
    margin: 0 -38px;
    padding: 0 38px;
  }

  .exterior-content {
    padding: 60px 10vw;
  }

  .car-model-text>div {
    font-size: 24px;
  }

  .car-model-text p {
    margin-top: 1.5vw;
  }

  .job {
    padding: 0 5vw;
  }

  .media {
    padding: 40px 60px;
  }

  .company {
    align-items: flex-start;
  }

  .company img {
    width: 50%;
  }

  .company-text {
    position: initial;
    flex: 1;
    padding: 0 20px;
    border-radius: 0;
    box-shadow: none;
  }

  .vision>div {
    padding: 40px;
  }

  .vision-img {
    padding: 60px 30px;
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --font-size-nav: 14px;
  }

  .logo {
    width: auto;
    height: 80%;
  }

  .menu-btn {
    margin-left: auto;
  }

  .sub-nav {
    grid-template-columns: 1fr;
    height: auto;
  }

  .sub-nav .left {
    padding-bottom: 9vw;
  }

  .sub-nav .right {
    padding: 9vw 0;
  }

  .recent-news-title {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .buy-car-title {
    left: 4vw;
  }

  .buy-car-content {
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .buy-car-content>nav {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 1080px) {
  .nav {
    display: none;
  }

  .tab-bar {
    display: block;
    top: 60px;
  }

  .page-tab {
    display: block;
  }

  .page-tab a {
    margin: 5px;
  }

  .test-drive {
    padding: 14px;
    min-height: 76px;
  }

  .test-drive form select,
  .test-drive form input {
    margin: 6px 0;
  }

  .car-model-item::before {
    height: 22vw;
  }

  .parameter {
    padding: 100px;
  }

  .form-item {
    grid-template-columns: repeat(2, 410px);
    grid-gap: 20px 30px;
    padding-left: 30px;
  }

  .form-item select,
  .form-item input[type="text"] {
    width: 300px;
  }

  .contact-main {
    display: flex;
    flex-direction: column;
  }

  .contact-main>* {
    width: 100%;
  }

  .job {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .job-left {
    display: flex;
    align-items: flex-start;
    width: 100%;
    background-color: #f8fafe;
  }

  .job-left.job-list {
    display: block;
    max-width: 100%;
    min-height: auto;
  }

  .job-list-item.active::after {
    display: none;
  }

  .job-avatar {
    width: 30%;
  }

  .job-form {
    width: 70%;
    padding: 30px;
    border-radius: 0;
    transform: translate(0, 0);
  }

  .job-form input[type="text"] {
    width: calc(100% - 104px);
  }

  .job-right {
    width: 100%;
    min-height: auto;
  }

  /* .job-btn.pos-btn {
    right: 20px;
  } */

  .news {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    margin-top: 30px;
  }

  .news-img {
    width: 100%;
    height: auto;
    padding-top: 67%;
    background-size: calc(100% - 30px) auto;
  }

  .news-item {
    padding: 0 15px;
  }

  .news-item-title {
    white-space: initial;
  }

  .media-content {
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }

  .media-img {
    width: 100%;
    margin-right: 0;
  }

  .media-list {
    width: 100%;
    margin-top: 40px;
  }

  .activity {
    grid-template-columns: repeat(auto-fill, 380px);
  }

  .history {
    padding: 50px 0;
  }

}

@media screen and (max-width: 800px) {
  .timeline-year {
    position: relative;
    align-items: flex-end;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 768px) {
  .nav-list {
    width: 60%;
  }

  .copyright {
    flex-direction: column;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-map {
    width: 100%;
    margin-top: 40px;
  }

  .box {
    padding: 20px;
  }

  .buy-car {
    margin-bottom: 20px;
  }

  #videoBox,
  #recentNews {
    margin-top: 24px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }

  .about-us {
    padding-top: 148px;
  }

  .title-wide {
    width: 284px;
    height: 168px;
  }

  .c-and-j {
    flex-direction: column;
    align-items: initial;
  }

  .c-and-j-bg {
    flex: 0 1 auto;
    height: 200px;
    padding-top: 90px;
    padding-left: 40px;
  }

  .buy-car-content>img {
    width: 74vw;
  }

  .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
  }

  .exterior #swiper1 {
    margin: 0 -20px;
    padding: 0 20px;
  }

  .exterior-content {
    padding: 60px 30px 20px;
  }

  .car-model {
    justify-content: center;
  }

  .car-model-item {
    width: 80vw;
  }

  .car-model-item img {
    width: 76vw;
    height: auto;
  }

  .car-model-item::before {
    height: 42.5vw;
  }

  .car-model-text {
    margin-left: 6vw;
  }

  .car-model-text>div {
    font-size: 20px;
  }

  .car-model-text p {
    margin-top: 2.5vw;
  }

  .parameter {
    padding: 80px 40px;
  }

  .form-item {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }

  .form-item select,
  .form-item input[type="text"] {
    width: calc(100% - 110px);
  }

  .media {
    padding: 40px 20px;
  }

  .company {
    flex-direction: column;
    padding: 40px 20px;
  }

  .company img {
    width: 100%;
  }

  .company-text {
    width: 100%;
    margin-top: 20px;
    padding: 0;
  }

  .vision {
    flex-direction: column;
  }

  .vision>div {
    padding: 40px 20px;
  }

  .vision-left {
    width: 100%;
  }

  .vision-img {
    padding: 40px 20px;
  }
}

@media screen and (max-width: 580px) {
  .test-drive {
    flex-direction: column;
  }

  .test-drive img {
    margin-right: 0;
  }

  .test-drive form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 15px 0;
  }

  .test-drive form select,
  .test-drive form input {
    width: 46%;
  }

  .test-drive button {
    margin-left: 0;
  }

  .car-model {
    margin-top: 30px;
  }


  .car-model-item {
    width: 84vw;
    margin-bottom: 20px;
  }

  .car-model-item::before {
    height: 44vw;
  }

  .contact-main {
    padding: 40px 40px 20px;
  }

  .activity {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    margin-top: 40px;
  }

  .activity-text {
    padding: 15px;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --font-size-title: 24px;
    --font-size-enTitle: 18px;
  }

  .title {
    width: 104px;
    height: 138px;
    padding: 10px;
  }

  .title>span {
    letter-spacing: 5px;
  }

  .logo {
    width: 50vw;
    height: auto;
  }

  .nav-list {
    width: 80%;
  }

  .contact-text {
    font-size: 14px;
    margin-top: 10px;
  }

  .about-us {
    padding-top: 128px;
  }

  .title-wide {
    width: 264px;
    height: 148px;
  }

  .c-and-j-bg {
    height: 180px;
    padding-top: 80px;
    padding-left: 40px;
  }

  #videoBox,
  #recentNews {
    padding: 0 18px;
  }

  .car-switch>div {
    margin: 40px 10px 20px;
  }

  .car-model-item::before {
    height: 45vw;
  }

  .job-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .job-avatar {
    width: 50%;
  }

  .job-form {
    width: 100%;
  }

  .job-right {
    padding: 20px;
  }

  .media-list-item {
    flex-direction: column;
  }

  .listText .media-list-item img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .media-list-data {
    margin-bottom: 20px;
  }

  .car-switch {
    font-size: 16px;
  }
}